<template>
	<div class="loginbg">
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>登录操作</span>
			</div>
			<el-input v-model="userName" placeholder="请输入用户名" >
				<i slot="prefix" class="el-input__icon el-icon-s-custom"></i>
			</el-input>
			
			<el-input v-model="userPwd" placeholder="请输入密码" show-password="true"  >
				<i slot="prefix" class="el-input__icon el-icon-lock"></i>
			</el-input>
			
			<el-checkbox v-model="checked" style="margin-top: 20px; " >记住密码</el-checkbox>
			
			<el-button type="primary" round
				style="display: block;width: 100%;margin-top: 30px;height: 60px;font-size: 18px;border-radius: 30px;">登录</el-button>
			
			 <el-link type="primary"
				style="margin-top: 20px;position: relative;left:82%;margin-bottom: 30px;font-size: 18px;"></el-link>
			 <!--  忘记密码  -->
		</el-card>
	</div>
</template>

<script>
	export default {
	    data() {
	      return {
			userName:"",
			userPwd:'',
	        checked: true
	      };
	    }
	  };
</script>

<style>
	.loginbg {
		background: url(../../imgs/icon_login_bg.png);
		width: 100%;
		height: 100%;
		position: relative;
	}

	.box-card {
		width: 500px;
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
		left: 50%;
	}

	.el-input{
		margin-top: 30px; 
	}
	.el-card{
		font-size: 18px;
	}

	.el-input__inner{
		height: 60px;
		font-size: 18px;
		line-height: 60px;
	}
	.el-input__icon{
		height: 60px;
		line-height: 60px;
	}
	  
</style>
